<template>
  <div class="mod-spu">
    <data-table ref="dataTableRef" :criterias="criterias" name="spu" :initLoad="true" url="/product/spu/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <dt-search-item label="商品分类" prop="categoryIds">
          <category-cascader v-model="criterias.categoryIds" />
        </dt-search-item>
        <dt-search-item label="品牌名称" prop="categoryId">
          <brand-select v-model="criterias.brandId" :category-id="criterias.categoryId" />
        </dt-search-item>
        <dt-search-item label="发布状态" prop="published">
          <el-select v-model="criterias.published" clearable placeholder="请选择发布状态">
            <el-option label="新建" value="0"></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="2"></el-option>
          </el-select>
        </dt-search-item>
        <dt-search-item label="商品名称" prop="name">
          <el-input v-model="criterias.name" clearable maxlength="50"></el-input>
        </dt-search-item>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed prop="name" show-overflow-tooltip align="left" label="商品名称" width="220" />
      <el-table-column prop="desct" show-overflow-tooltip align="left" label="商品描述" width="260" />
      <el-table-column prop="published" align="center" label="发布状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.published === 0">新建</el-tag>
          <el-tag v-if="scope.row.published === 1" type="success">上架</el-tag>
          <el-tag v-if="scope.row.published === 2" type="info">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" align="center" label="商品分类" width="120" />
      <el-table-column prop="brandName" align="center" label="品牌名称" width="120" />
      <el-table-column prop="weight" align="right" label="商品重量" width="100" />
      <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
      <el-table-column prop="updateTime" align="center" label="修改时间" width="180" />
      <el-table-column fixed="right" header-align="center" align="center" width="180" label="操作">
        <template #default="scope">
          <el-button link type="primary" v-if="admin.isAuth('product:spu:published')" @click="publishSpuEvent(scope.row)">上架 </el-button>
          <el-button link type="primary" v-if="admin.isAuth('product:spu:updateattr')" @click="updateSpuAttrEvent(scope.row)">规格 </el-button>
        </template>
      </el-table-column>
    </data-table>
    <!-- 弹窗, 新增 / 修改 -->
    <spu-attr v-if="spuAttrVisible" ref="spuAttrRef"></spu-attr>
  </div>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import http from "@/utils/httpRequest";
import { ref, watch, nextTick } from "vue";

import SpuAttr from "./spu-attr.vue";
import BrandSelect from "../common/brand-select.vue";
import CategoryCascader from "../common/category-cascader.vue";

import { ElMessageBox } from "element-plus";

// 查询条件
const criterias = ref({
  categoryId: "",
  categoryIds: [],
  brandId: "",
  published: "",
  name: "",
});

// 数据表格引用
const spuAttrVisible = ref(false);

// 数据表格引用
const dataTableRef = ref();

// 商品属性窗口引用
const spuAttrRef = ref();

// 监控商品分组级联选择
watch(() => criterias.value.categoryIds, (val) => {
  if (val && val.length > 0) {
    criterias.value.categoryId = val[val.length - 1];
  }
});

// 表格刷新
const loadTableData = () => {
  dataTableRef.value.loadTableData();
};

// 上架处理
const publishSpuEvent = (d) => {
  ElMessageBox
    .confirm(`确定要上架[${d.name}]商品吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      http
        .post({
          url: `/product/spu/published?spuId=${d.id}`,
        })
        .then(({ data }) => {
          if (http.success(data, true, true)) {
            loadTableData();
          }
        });
    })
    .catch(()=>{});
};

// 修改规格参数
const updateSpuAttrEvent = async (d) => {
  spuAttrVisible.value = true;
  await nextTick();
  spuAttrRef.value.initForm(d);
};
</script>
